<template>
  <transition name="loading-fade">
    <div v-if="isLoading" class="loading-overlay">
      <div v-if="backgroundImage" class="loading-bg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
      
    </div>
  </transition>
</template>

<script>
export default {
  name: 'LoadingProgress',
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0
    },
    loadingText: {
      type: String,
      default: '正在加载您的名片...'
    },
    backgroundImage: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(221, 221, 221, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px);
}

.loading-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

.loading-container {
  text-align: center;
  color: #ffffff;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  min-width: 300px;
  filter: none;
}

.loading-animation { margin-bottom: 0.75rem; }

/* 山水动画元素 */
.shanshui-wrapper { position: relative; width: 240px; height: 140px; margin: 0 auto 12px; }
.shanshui-canvas { width: 240px; height: 140px; display: block; }

/* 云雾左右流动 */
.mist { animation: mist-move 6s linear infinite; }
.mist-1 { animation-duration: 10s; opacity: .45; }
.mist-2 { animation-duration: 8s; opacity: .35; }
.mist-3 { animation-duration: 12s; opacity: .3; }
@keyframes mist-move { 0%{ transform: translateX(0) } 100%{ transform: translateX(240px) } }

/* 山体缓慢呼吸般起伏（微缩放） */
.mountain { transform-origin: center; animation: mountain-breathe 7s ease-in-out infinite; }
.layer-back { animation-delay: .6s; }
.layer-mid { animation-delay: .2s; }
.layer-front { animation-delay: 0s; }
@keyframes mountain-breathe { 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.01)} }

/* 小舟轻轻起伏&微摆 */
.boat { transform-origin: 60px 100px; animation: boat-float 3.2s ease-in-out infinite; }
@keyframes boat-float { 0%,100%{ transform: translate(60px, 100px) rotate(-0.6deg) } 50%{ transform: translate(60px, 98px) rotate(0.6deg) } }

/* 水面同心涟漪 */
.ripple { transform-origin: 160px 108px; animation: ripple-expand 2.8s ease-out infinite; }
.r2 { animation-delay: .4s; }
.r3 { animation-delay: .8s; }
@keyframes ripple-expand { 0%{ transform: scale(.92); opacity:.18 } 70%{ transform: scale(1.06); opacity:.08 } 100%{ transform: scale(1.12); opacity:0 } }

/* 河流缓慢流动的高光 */
.river { stroke-dasharray: 6 6; animation: river-glint 3.6s linear infinite; }
@keyframes river-glint { 0%{ stroke-dashoffset: 0 } 100%{ stroke-dashoffset: -36 } }

/* 仙鹤振翼动画 */
.cranes .wing { transform-origin: 0 0; animation: wing-flap 1.6s ease-in-out infinite; }
.cranes .c2 .wing { animation-delay: .2s; }
@keyframes wing-flap { 0%,100%{ transform: rotate(-6deg) } 50%{ transform: rotate(8deg) } }

.loading-text {
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.9;
  text-shadow: 0 1px 1px rgba(255,255,255,.6);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.progress-container {
  width: 100%;
  margin-top: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #909090 0%, #bdbdbd 60%, #e5e5e5 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-text {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.85;
}

/* 庆祝动画 */
.celebration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sparkle {
  position: absolute;
  font-size: 2rem;
  animation: sparkle-bounce 1s ease-in-out infinite;
}

.sparkle-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 0.3s;
}

.sparkle-3 {
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.6s;
}

@keyframes sparkle-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

/* 淡入淡出动画 */
.loading-fade-enter-active, .loading-fade-leave-active {
  transition: opacity 0.5s ease;
}

.loading-fade-enter, .loading-fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .loading-container {
    margin: 1rem;
    padding: 1.5rem;
    min-width: auto;
  }
  
  .loading-text {
    font-size: 1rem;
  }
  
  .sparkle {
    font-size: 1.5rem;
  }
}
</style>
